export default function ProductPage() {
  return (
    <div className="p-6">
      <h1 className="text-2xl font-semibold mb-4">产品管理</h1>
      
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="md:col-span-2">
          <div className="bg-white rounded-lg shadow mb-6">
            <div className="p-4 border-b flex justify-between items-center">
              <h2 className="text-lg font-medium">产品列表</h2>
              <div className="flex gap-2">
                <button className="bg-blue-500 text-white px-3 py-1 rounded text-sm hover:bg-blue-600">
                  筛选
                </button>
                <button className="bg-green-500 text-white px-3 py-1 rounded text-sm hover:bg-green-600">
                  添加产品
                </button>
              </div>
            </div>
            
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
              {[1, 2, 3, 4, 5, 6].map((id) => (
                <div key={id} className="border rounded-lg overflow-hidden hover:shadow-md transition-shadow">
                  <div className="h-40 bg-gray-200 flex items-center justify-center">
                    <span className="text-gray-400">产品图片 {id}</span>
                  </div>
                  <div className="p-3">
                    <h3 className="font-medium">产品名称 {id}</h3>
                    <p className="text-sm text-gray-500 mt-1">产品描述信息...</p>
                    <div className="flex justify-between items-center mt-3">
                      <span className="text-red-500 font-medium">¥{(id * 100).toFixed(2)}</span>
                      <div className="flex gap-1">
                        <button className="text-blue-600 text-sm hover:text-blue-800">编辑</button>
                        <span className="text-gray-300">|</span>
                        <button className="text-red-600 text-sm hover:text-red-800">删除</button>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
            
            <div className="p-4 border-t flex justify-center">
              <div className="flex gap-1">
                <button className="px-3 py-1 border rounded text-sm hover:bg-gray-50">
                  上一页
                </button>
                <button className="px-3 py-1 bg-blue-500 text-white rounded text-sm">
                  1
                </button>
                <button className="px-3 py-1 border rounded text-sm hover:bg-gray-50">
                  2
                </button>
                <button className="px-3 py-1 border rounded text-sm hover:bg-gray-50">
                  下一页
                </button>
              </div>
            </div>
          </div>
        </div>
        
        <div className="md:col-span-1">
          <div className="bg-white rounded-lg shadow mb-6">
            <div className="p-4 border-b">
              <h2 className="text-lg font-medium">产品分类</h2>
            </div>
            <div className="p-4">
              <ul className="space-y-2">
                <li className="flex justify-between items-center p-2 bg-blue-50 rounded">
                  <span className="font-medium">全部产品</span>
                  <span className="text-gray-500 text-sm">42</span>
                </li>
                <li className="flex justify-between items-center p-2 hover:bg-gray-50 rounded">
                  <span>电子产品</span>
                  <span className="text-gray-500 text-sm">16</span>
                </li>
                <li className="flex justify-between items-center p-2 hover:bg-gray-50 rounded">
                  <span>家居用品</span>
                  <span className="text-gray-500 text-sm">12</span>
                </li>
                <li className="flex justify-between items-center p-2 hover:bg-gray-50 rounded">
                  <span>办公用品</span>
                  <span className="text-gray-500 text-sm">8</span>
                </li>
                <li className="flex justify-between items-center p-2 hover:bg-gray-50 rounded">
                  <span>其他分类</span>
                  <span className="text-gray-500 text-sm">6</span>
                </li>
              </ul>
            </div>
          </div>
          
          <div className="bg-white rounded-lg shadow">
            <div className="p-4 border-b">
              <h2 className="text-lg font-medium">热门产品</h2>
            </div>
            <div className="p-4">
              <ul className="space-y-3">
                {[1, 2, 3].map((id) => (
                  <li key={id} className="flex gap-3">
                    <div className="w-16 h-16 bg-gray-200 flex-shrink-0"></div>
                    <div>
                      <h4 className="font-medium">热门产品 {id}</h4>
                      <p className="text-sm text-gray-500">销量: {id * 233}</p>
                      <p className="text-red-500 text-sm">¥{(id * 120).toFixed(2)}</p>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
} 